<template>
  <!-- <router-view></router-view> -->
  <div class="box">
    <!-- <img src="./assets/img/logo.png" alt="" />
    <button @click="lalal">点击闪烁</button> -->
    <!-- <div class="content">
      
    <img style="width: 100px;height:auto" src="./assets/img/logo.png" alt="" />
    <button @click="lalal">点击闪烁</button>
    </div> -->
  </div>
</template>

<script>
import { actionStartFlash } from "./main/ipc/vtom";
export default {
  name: "App",
  data() {
    return {};
  },
  methods: {
    lalal() {
      console.log(1);
      actionStartFlash();
    },
  },
};
</script>

<style scoped>
.box{
  width: 100%;
  height: 100%;
  box-sizing: border-box;
  background-image: url('./assets/img/1.jpg');
  background-size: cover;
  background-position: 50% 50%;
  background-repeat: no-repeat;
}
.content {
  width: 200px;
  height: 100px;
  position: absolute; /*绝对定位*/
  left: 0;
  top: 0;
  animation: long 20s linear infinite; /* 动画属性：动画名 动画时间 运行速率（匀速） 无线执行*/
}
@keyframes long {
  /* 动画执行开始的样式 */
  from {
  }
  25% {
    left: calc(100% - 200px); /*calc()函数用于动态计算长度值。*/
    top: 0;
  }
  50% {
    left: calc(100% - 200px);
    top: calc(100% - 100px);
  }
  75% {
    left: 0;
    top: calc(100% - 100px);
  }
  /* 动画执行完毕的样式，回到开始的地方 */
  to {
    left: 0;
    top: 0;
  }
}
</style>